.ag-angle-select {
    display: flex;
    align-items: center;
}

.ag-angle-select-wrapper {
    display: flex;
}

.ag-angle-select-parent-circle {
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: solid var(--ag-border-width) var(--ag-border-color);
    background-color: var(--ag-background-color);
}

.ag-angle-select-child-circle {
    position: absolute;
    top: 4px;
    /* rtl:ignore */
    left: 12px;
    width: 6px;
    height: 6px;
    /* rtl:ignore */
    margin-left: -3px;
    margin-top: -4px;
    border-radius: 3px;
    background-color: var(--ag-foreground-color);
}

.ag-slider-wrapper {
    display: flex;

    :where(.ag-input-field) {
        flex: 1 1 auto;
    }
}

.ag-color-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--ag-spacing);
}

.ag-spectrum-color {
    flex: 1 1 auto;
    position: relative;
    overflow: visible;
    cursor: default;
}

.ag-spectrum-color,
.ag-spectrum-fill {
    border-radius: var(--ag-border-radius);
}

.ag-spectrum-fill {
    position: absolute;
    inset: 0;
}

.ag-spectrum-val {
    cursor: pointer;
    background-image: linear-gradient(to top, black, rgb(204 154 129 / 0%));
}

.ag-spectrum-dragger {
    position: absolute;
    pointer-events: none;
    cursor: pointer;
    border-radius: var(--ag-color-picker-thumb-size);
    height: var(--ag-color-picker-thumb-size);
    width: var(--ag-color-picker-thumb-size);
    border: var(--ag-color-picker-thumb-border-width) solid white;
    background: black;
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 24%);
}

.ag-spectrum-hue,
.ag-spectrum-alpha {
    cursor: default;
}

.ag-spectrum-hue-background {
    /* rtl:ignore */
    background: linear-gradient(to left, #f00 3%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    width: 100%;
    height: 100%;
}

.ag-spectrum-alpha-background {
    /* rtl:ignore */
    background:
        linear-gradient(
            to right,
            var(--ag-internal-spectrum-alpha-color-from),
            var(--ag-internal-spectrum-alpha-color-to)
        ),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="4" height="4" fill="%23fff"/><path d="M0 0H2V4H4V2H0Z" fill="%23b2b2b2"/></svg>')
            top left / 4px 4px;
    width: 100%;
    height: 100%;
}

.ag-spectrum-tool {
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    height: var(--ag-color-picker-track-size);
    border-radius: var(--ag-color-picker-thumb-size);
}

.ag-spectrum-slider {
    position: absolute;
    pointer-events: none;
    margin-top: calc((var(--ag-color-picker-track-size) / 2 + var(--ag-color-picker-thumb-size) / 2) * -1);
    width: var(--ag-color-picker-thumb-size);
    height: var(--ag-color-picker-thumb-size);
    border-radius: var(--ag-color-picker-thumb-size);
    border: var(--ag-color-picker-thumb-border-width) solid white;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}

:where(.ag-spectrum-alpha) .ag-spectrum-slider {
    background: linear-gradient(
            to bottom,
            var(--ag-internal-spectrum-alpha-color),
            var(--ag-internal-spectrum-alpha-color)
        )
        var(--ag-background-color);
}

.ag-recent-colors {
    display: flex;
    gap: 6px;
    margin: 10px var(--ag-spacing) 2px;
}

.ag-recent-color {
    cursor: pointer;
    border: solid var(--ag-border-width) var(--ag-border-color);
}

.ag-angle-select[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.ag-slider-field,
.ag-angle-select-field {
    margin-right: calc(var(--ag-spacing) * 2);
}

.ag-color-dialog {
    border-radius: 5px;
}

:where(.ag-color-picker) {
    .ag-picker-field-wrapper {
        padding-left: var(--ag-spacing);
        padding-right: var(--ag-spacing);
    }

    .ag-picker-field-display {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: var(--ag-list-item-height);
    }
}

.ag-color-picker-color,
.ag-color-picker-value {
    margin-right: var(--ag-spacing);
}

.ag-spectrum-tools {
    padding: 10px 0 0;
}

.ag-spectrum-hue-background,
.ag-spectrum-alpha-background {
    border-radius: var(--ag-color-picker-track-border-radius);
}

.ag-color-input-color,
.ag-color-picker-color,
.ag-recent-color {
    border-radius: var(--ag-color-picker-color-border-radius);
}

.ag-spectrum-sat {
    /* rtl:ignore */
    background-image: linear-gradient(to right, white, rgb(204 154 129 / 0%));
}

.ag-spectrum-color,
.ag-spectrum-slider,
.ag-recent-color {
    &:where(:not(:disabled, [readonly])):focus-visible {
        box-shadow: var(--ag-focus-shadow);
    }
}

.ag-color-picker-color,
.ag-color-input-color {
    width: var(--ag-icon-size);
    height: var(--ag-icon-size);
    border: solid var(--ag-border-width) var(--ag-border-color);
}

/* stylelint-disable-next-line selector-max-specificity */
.ag-color-input .ag-input-field-input {
    padding-left: calc(var(--ag-icon-size) + (var(--ag-spacing) * 2));
}

:where(.ag-color-input) .ag-color-input-color {
    position: absolute;
    margin-left: var(--ag-spacing);
}
